<html>

<head>
    <title>h3</title>
    <style>
        .main {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        .p1,
        .p2,
        .p3,.p4,.p5,.p6 {
            width: 200px;
            border-top: 1px solid #a4e2b1;
            border-bottom: 1px solid #e2e1a4;
        }

        .title {
            color: #802727;
            text-align: center;
            background-color: azure;
        }

        .ml-20 {
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="p1">
            <div class="title">设置色相饱和度</div>
            <p>hello1</p>
            <p>hello2</p>
            <p>hello3</p>
            <p>hello4</p>
            <p>hello5</p>
        </div>
        <div class="p2 ml-20">
            <div class="title">设置奇偶颜色</div>
            <p>hello1</p>
            <p>hello2</p>
            <p>hello3</p>
            <p>hello4</p>
            <p>hello5</p>
        </div>
        <div class="p3 ml-20">
            <div class="title">设置字体大小</div>
            <p>hello1</p>
            <p>hello2</p>
            <p>hello3</p>
            <p>hello4</p>
            <p>hello5</p>
        </div>
        <div class="p4 ml-20">
            <div class="title">enter&append</div>
            <p>hello1</p>
            <p>hello2</p>
            <p>hello3</p>
            <p>hello4</p>
            <p>hello5</p>
        </div>
        <div class="p5 ml-20">
            <div class="title">exit&remove</div>
            <p>hello1</p>
            <p>hello2</p>
            <p>hello3</p>
            <p>hello4</p>
            <p>hello5</p>
            <p>hello6</p>
            <p>hello7</p>
        </div>
        <div class="p6 ml-20">
            <div class="title">update</div>
            <p>hello1</p>
            <p>hello2</p>
            <p>hello3</p>
            <p>hello4</p>
            <p>hello5</p>
            <p>hello6</p>
        </div>
    </div>
    <script src="js/d3.v6.min.js"></script>
    <script>
        //d3.selectAll("p").style("color","green");
        // 设置色相饱和度
        d3.selectAll(".p1 p").style("color", function () {
            return "hsl(" + Math.random() * 360 + ",100%,50%)";
        });
        // 奇偶
        d3.selectAll(".p2 p").style("color", function (d, i) {
            return i % 2 ? "#ffcccc" : "#eee";
        });
        // 设置字体大小
        d3.selectAll(".p3 p")
            .data([8, 15, 16, 23, 42])
            .style("font-size", function (d) { return d + "px"; });
        // data与元素不匹配enter&append补齐
        d3.select(".p4")
            .selectAll("p")
            .data([4, 8, 15, 16, 23, 42])
            .enter().append("p")
            .text(function (d) { return "I'm number " + d + "!"; });
        // data与元素不匹配exit&remove删除
        d3.select(".p5")
            .selectAll("p")
            .data([4, 8, 15, 16, 23, 42])
            .exit().remove("p")
            .text(function (d) { return "I'm number " + d + "!"; });
        // data与元素匹配直接更新
        var p = d3.select(".p6")
            .selectAll("p")
            .data([4, 8, 15, 16, 23, 42])
            .text(function (d) { return "I'm number " + d + "!"; });
        // 过渡
        d3.select("body").transition()
        .duration(1000) // 循环次数
        .delay(function(d,i){ return i * 10;}) // 延时
        .style("background-color", function(){
            return "hsl("+Math.random()*360+",100%,50%)";
        })
    </script>
</body>

</html>